<template>
  <!-- 添加文章分类弹窗 -->
  <!-- 这里的visible不能加.sync -->
  <el-dialog
    class="addDialog"
    title="添加文章分类"
    :visible="addDialogVisible"
    @close="addDialogClose"
    width="40%"
  >
    <el-form :model="addForm" :rules="rules" ref="addForm">
      <el-form-item
        label="分类名称"
        :label-width="formLabelWidth"
        prop="cate_name"
      >
        <el-input v-model="addForm.cate_name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        label="分类别名"
        :label-width="formLabelWidth"
        prop="cate_alias"
      >
        <el-input v-model="addForm.cate_alias" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="addSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addCateApi } from "@/api/cate";
export default {
  name: "AddCateDialog",
  props: ["addDialogVisible"],
  data() {
    let validate_cate_name = (rule, value, callback) => {
      // 非空字符校验校验---正则不熟
      const reg_cate_name = /\s+/;
      if (!value) {
        return callback(new Error("用户分类不能为空"));
      } else if (
        this.addForm.cate_name &&
        reg_cate_name.test(this.addForm.cate_name)
      ) {
        return callback(new Error("昵称必须是1-10位的非空字符"));
      } else {
        // 每种情况都需要callback()，否则进入没有callback()的情况时，validate()函数不执行
        callback();
      }
    };

    let validate_cate_alias = (rule, value, callback) => {
      const reg_cate_alias = /^[a-zA-Z0-9]{1,15}$/;
      if (!value) {
        return callback(new Error("分类别名不能为空"));
      } else if (
        this.addForm.cate_alias &&
        !reg_cate_alias.test(this.addForm.cate_alias)
      ) {
        return callback(new Error("分类别名必须是1-15位的字母数字"));
      } else {
        // 每种情况都需要callback()，否则进入没有callback()的情况时，validate()函数不执行
        callback();
      }
    };
    return {
      formLabelWidth: "80px",
      addForm: {
        cate_name: "",
        cate_alias: "",
      },
      rules: {
        cate_name: [
          {
            required: true,
            message: "分类名称不能为空",
            trigger: ["change", "blur"],
          },
          {
            min: 1,
            max: 10,
            message: "分类名称必须是1-10位的非空字符",
            trigger: "blur",
          },
          { validator: validate_cate_name, trigger: ["blur", "change"] },
        ],
        cate_alias: [
          { required: true, message: "分类别名不能为空", trigger: "change" },
          {
            min: 1,
            max: 15,
            message: "分类别名必须是1-15位的字母数字",
            trigger: "blur",
          },
          { validator: validate_cate_alias, trigger: ["blur", "change"] },
        ],
      },
    };
  },
  methods: {
    addDialogClose() {
      // resetFields() 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
      this.$refs.addForm.resetFields();
      this.$emit("update:addDialogVisible", false);
    },
    // 提交按钮回调事件
    addSubmit() {
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          const res = await addCateApi(this.addForm);
          if (res.data.code === 0) {
            this.$refs.addForm.resetFields();
            // 更新页面数据
            this.$emit("updateData");
            this.$message.success("新增文章分类成功");
          } else {
            this.$message.error("新增文章分类失败");
          }
          this.$emit("update:addDialogVisible", false);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 取消
    cancel() {
      this.$emit("update:addDialogVisible", false);
    },
  },
};
</script>

<style>
</style>